Template Documentation v1.0
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form in themeforest.net. Thanks so much!
This template has everything that you need to easy develop minimal and modern portfolio:
Template has the following project structure:
All the html code are well documented for you to edit. Feel free to edit it to reach the result you want to get. Html-files use UTF-8 codepage. Use the editor with UTF-8 support to avoid problems with unreadable symbols.
<html lang="en" data-random-animation="false" data-animation="1"> Html tag contain the vital information about the page transition animation. There are two types of attributes as follows:
data-random-animation
data-animation
data-random-animation: This attritute tell the scripts that the animation will be random. It has two values true and false. If the value is true then the animation will be random. If false the animation value is based on data-animation.
data-animation: This attribute has the value 1 to 36. It tell the script which animation to run. You can choose the animation value from the demo page and put the value in here. This attribute will only run when the data-random-animation has the value false.
Note: The values should be in quotes i.e "".
Tags with metainformation are located inside <head> tag. Fill them to provide information about your website to search engines:
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" /> Also there is <title> tag is the title of your website.
<title>Website Name</title> <link> tags: These tags contains plugin.css, style.css, color.css see Css Structure for more information.
<body> tag contains the main website which users can view. It has following structure:
<body>
<div id="page">
<header>
<!--Website Navigation Area-->
</header>
<div id="main" class="site-main">
<!--Website Sections Area-->
</div>
</div>
</body> Note: The <header> and <div id="main" class="site-main"> should be inside <div id="page">.
Header tag contain code for website navigation area. It has structure as follows:
<header>
<div class="header-content">
<div class="header-mobile">
<!--Mobile Header-->
</div>
<div class="header-main" data-simplebar>
<!--Site Main Header-->
</div>
</div>
</header> <div class="header-content">: Is the site header container both header-mobile and header-main should be inside header-content.
Is the header for mobile responsive of the website. It has the toggle button to toggle site main header in mobile devices.
<a class="header-toggle"><i class="fas fa-bars"></i></a> <!--Toggle button-->
<h2>Your Name</h2> <!-- Should change the name to you own--> Is the main header for the website. Its content are as follows:
<div class="image-container">
<!-- Image and the Heading of the website -->
</div>
<nav class="nav-menu">
<!-- Navigation Links -->
</nav>
<div class="nav-footer">
<!-- Copyright and Social icon container -->
</div> image-container : This area contains the image and the name. You should put your image and name in this area.
<div class="image-container">
<h2 class="header-name">Your Name</h2>
<img src="image-link" alt="profile-pic">
</div> Note:- The image should of 500x500 resolution.
nav-menu : This area contains the navigation links for the website its content is as follow:
<ul>
<li><a href="#home" class="pt-link active"><span class="nav-menu-icon"><i class="lnr lnr-home"></i></span>Home </a> </li>
<li><a href="#about" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-user"></i></span>About Me</a></li>
<li><a href="#resume" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-license"></i></span>Resume</a></li>
<li><a href="#portfolio" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-briefcase"></i></span>Portfolio</a></li>
<li><a href="#blog" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-book"></i></span>Blog</a></li>
<li><a href="#contact" class="pt-link"><span class="nav-menu-icon"><i class="lnr lnr-envelope"></i></span>Contact</a></li>
</ul> The <a> tags have the href value which corresponds to the page section id attribute.It also have the class of value pt-link, its important for the page transition to work. If you put href value other than section id it won't work and it should start with (#section-id-name). It also have the logo associated with the link to display.
nav-footer : This area contain the social links and the copyright text.
<ul class="social">
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<!-- Other Links -->
</ul>
<div class="copy">
<p>© 2018 Cosmos-Themes.<br>All Right Reserved.</p>
</div>
This area contains the sections of the website. Structure as follows:
<div id="main" class="site-main">
<section id="home">
<!--Section content-->
</section>
<section id="about">
<!--Section content-->
</section>
<section id="resume">
<!--Section content-->
</section>
<section id="portfolio">
<!--Section content-->
</section>
<section id="blog">
<!--Section content-->
</section>
<section id="contact">
<!--Section content-->
</section>
</div> The main div contain 6 sections corresponds to the links in the navigation.
This section contain the background image, name, and some animated text you want to show on the website home page. See html file its easy to understand.
This section contains the introduction, personal information, services, clients, and testimonial sections.
signature: Signature image is transparent png with the resolution of approximate 450x100. If you have the your signature then resize to the desired resolution.
If you dont have the signature of yours you can go to this site https://fontmeme.com/signature-fonts/ and make yours there. We have used font Signerica_Fat with the font size of 40. Color black for white layout and color black for white layout. Its upto you which color you want.
This section contains your experience, education and skills you have.
<li>
<span class="line-left"></span>
<div class="content">
<h4><!--Course or Position--></h4>
<h5><!--School or Company Name--></h5>
<p class="info">
<!--Description-->
</p>
</div>
<span class="year">
<span class="to"><!--Year till--></span>
<span class="from"><!--Year from--></span>
</span>
</li> <div class="skill-item">
<h4 class="progress-title">Coral Draw</h4><!--Title of the skill-->
<div class="progress">
<div class="progress-bar" data-progress-value="91"><!--Value is the experience you gained-->
<div class="progress-value">91%</div><!--Should edit it the same as above attribute value-->
</div>
</div>
</div> This section contains the portfolio's items. It has the following structure:
<div class="section-container">
<div class="page-heading">
<!--Page Heading-->
</div>
<div class="row">
<div class="col-md-12 portfolio-filter text-center">
<!--Portfolio Filter-->
</div>
</div>
<div class="row portfolio-items">
<div class="item col-lg-4 col-md-6 graphic">
<!--Portfolio Item-->
</div>
<!--Other Portfolio items-->
</div>
</div> Portfolio Section have two parts:
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".brand">Brand</li>
<li data-filter=".design">Design</li>
<li data-filter=".graphic">Graphic</li>
</ul> Portfolio filters are the list item when clicked it will show portfolios related to those category.
data-filter : attribute specify the category the portfolios belongs to. It can have any value but thing to notice is that the
value starts with ".value".
<div class="item col-lg-4 col-sm-6 brand">
<a class="image-link" href="img/portfolio/img-1.jpg">
<figure>
<img src="img/portfolio/img-1.jpg" alt="">
<figcaption>
<h4>Book Design</h4>
<p>Graphic</p>
</figcaption>
</figure>
</a>
</div> Portfolio item is contain inside <div> tag. It have class attribute which value are item and brand, item is used for styling the portfolio single item
and brand is used to show which category the item belongs to in respect to the filter.
Portfolio item has inside anchor tag. This tag has class and href attribute. The class attribute specify
that the link is of image type. There are 3 possible values:
This section contains the blog items. It has the following structure:
<div class="section-container">
<div class="page-heading">
<!--Section Heading-->
</div>
<div class="row blogs-masonry">
<div class="col-lg-4 col-sm-6">
<!--Blog Item-->
<a href="#" class="blog-item">
<div class="blog-img">
<!--Blog Image-->
</div>
<div class="blog-content">
<!--Blog Content-->
</div>
</a>
</div>
</div>
</div> Blog item when click will open the link related to that blog item for example single-blog.html page.
This section contains contact form, contact information and google map.
Note : Edit this line in mail.php
$recipient = "example@example.com"; /*Change the email to your email id.*/
Contact Information : This contains you address, phone, email id.
Google Map : This contain the google map where you are located.
<div id="map" data-latitude="-37.817214" data-longitude="144.955925" data-zoom="15"></div> Enter the latitude and longitude of your location in here. Search google for more information
plugins.css: This file contain the css library files which are located in plugins folder.
style.css: This file contain the dark layout style for the template.
style-light.css: This file contains the light layout style for the template.
(*-color.css): This files are for choosing highlighed color of you own choice. There are 6 color file in this template.
Note: If you want to edit you the style i recommend you your own css file and link to the template of you choice. Edit above files only if you know what you are doing.
jquery.min.js: This file is jquery library.
modernizr.js: This file is javascript library that detect html5 and css3 features in various browsers.
plugins.min.js: This file contains various js library used in this template.
main.js: This file is main javascript file for this template.
Note: Editing these files can cause unexpected behaviour to the template only edit these file if you know what you are doing.
This template uses
Images are not included. All images are replaced with the placeholder. Images used in this template can be find at:
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting my profile on themeforest and message me with the form section.